<html>
    <head>
        <title> 使用 mapState 辅助函数将 state 快速映射到计算属性 </title>
    </head>
    <body>
        <script>
            /*
                        四、mapState 辅助函数

                                1、什么是 mapState 辅助函数，为什么用它？

                                            当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。

                                            为了解决这个问题，我们可以使用  "mapState辅助函数" 帮助我们生成计算属性，让你少按几次按键：
                                            
                                                   ！-- 页面路径： pages/index/index.vue ---

                                                   <template>
                                                        <view>
                                                             <view> 用户名： {{ username}}</view>
                                                             <view> 年龄： {{ age }}</view>
                                                        </view>
                                                   </template>

                                                   <script>
                                                        import {mapState} from 'vuex' // 导入 mapState 辅助函数 (也就是说　mapState是一个函数定义(C#中可以看作委托))
                                                        
                                                        export default {
                                                            data(){
                                                                return {}
                                                            },
                                                            computed:mapState({  // 将计算属性映射到 state 的子集上

                                                                    // 从 state 中拿到数据  剪头函数可使代码更简练

                                                                    username: state => state.username, ★、// 剪头函数无 this ,所以不能访问当前组件实例的属性

                                                                    age: state= > state.age ★、// 剪头函数无 this，所以不能访问当前组件实例的属性
                                                            })
                                                        }
                                                   <//script>

                                2、语法糖：   当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。

                                                    ！-- 页面路径： pages/index/index.vue ---
                                                    <template>
                                                        <view>
                                                             <view>用户名：{{ username }}</view>
                                                             <view>年龄： {{ age }}</view>
                                                        </view>
                                                    </tempalte>

                                                    <script>
                                                        import {mapState} from 'vuex' // 引入 mapState

                                                        export default{
                                                            data(){
                                                                return {}
                                                            },

                                                            computed: mapService([ 
                                                                'username', //映射 this.username 为 store.state.username
                                                                'age'
                                                            ]);
                                                        }
                                                    <//script>

                                3、mapSate 辅助函数中的 "自定义映射逻辑"

                                             mapState辅助函数映射过程中，可以为 state 中的某个状态添加映射到计算属性的自定义逻辑，
                                             
                                             这个自定义逻辑通过一个 "常规函数实现" (于是有了this指向当前组件的Vue实例)


                                                 !--  页面路径：  pages/index/index.vue ---

                                                 <template>
                                                        <view>
                                                            <view>用户名： {{ username}}</view>
                                                            <view>年龄： {{ age }}</view>
                                                        </view>
                                                 </template>

                                                 <script>
                                                        import {mapState} from 'vuex' // 引入 mapState

                                                        export default{
                                                            date(){
                                                                return {
                                                                    firstName:'Li'
                                                                }
                                                            },
                                                            computed: {
                                                                ...mapState({
                                                                    username:function(state){    // 想使用它想使用this，就必须写成常规函数，不能使用剪头函数
                                                                        return this.firstName + '' + state.username;
                                                                    },
                                                                    age:
                                                                })
                                                            }
                                                        }
                                                 <//script>

                                4、使用对象展开运算符
                                
                                            mapState 函数返回的是一个对象。使用对象展开运算符将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。极大地简化写法：

                                            !-- 页面路径 : pages/index/index.vue ---
                                            <template>
                                                <view>
                                                    <view>用户名： {{ username}}</view>
                                                    <view>年龄： {{ age}}</view>
                                                </view>
                                            </template>

                                            <script> 
                                                import { mapState} from 'vuex' // 引入 mapState

                                                export default {
                                                    data(){
                                                        return{}
                                                    },
                                                    computed:{
                                                        // 使用对象展开运算符将此对象混入到外部对象中去
                                                        ...mapState({
                                                            username:state=> state.username,
                                                            age:state=> state.age
                                                        })
                                                    }
                                                }
                                            <//script>

                  */
        </script>
    </body>
</html>